<style>
  .tenways-index .product-series {
    margin: 0;
  }
  .tenways-index .first-section{
    padding-top: 80px;
  }
  .compare-product_series{
    padding-top: 40px;
    background: #F8F8F8;
  }
  .item-product {
    text-align: center;
  }
  .item-product  .block-sale {
    position: absolute;
    top: 25px;
    left: 20px;
    z-index: 2;
  }
  .item-product.full-width  .block-sale {
    top: 40px;
  }
  .all-product .full-width .image-product{
    max-width: 57%;
    margin: 0 auto;
  }
  .all-product .full-width{
    width: 100%;
    max-width: 100%;
  }
  ul.all-product {
    position: relative;
    overflow: hidden;
    margin-left: -40px;
  }
  ul .item-product{
    max-width: 50%;
    width: 50%;
    margin: 0 auto;
    float: left;
    padding-left: 40px;
    padding-bottom: 40px;
  }
  .item-product .block-content{
    padding: 40px 0;
    border-radius: 8px;
    background: #FFF;
    position: relative;
  }
  .block-content .text-icon{
    position: absolute;
    left: 40px;
  }
  .item-product .block-content .media{
    background: transparent;
  }
  .price-product .price{
    display: inline-block;
    letter-spacing: -0.7px;
    text-align: center;
    font-weight: 700;
    color: #2F80ED;
    font-size: 24px;
  }
  .price-product .compare_at_price{
    color: #8D8D8D;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    padding-left: 12px;
  }
 .block-content .text{
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px; 
    color: #2F80ED;
 }
 .block-content .text-bottom {
  padding-top: 20px;
 }
 .price-product{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  line-height: 32px;
  border-bottom: 1px solid #E6E6E6;
 }
 .item-product .price-product{
  padding-top: 14px;
 }
 .item-product.full-width .price-product{
    padding-top: 0;
 }
 .text-bottom .button {
    background: var(--2, linear-gradient(180deg, #599BF4 0%, #0D74FF 100%));
    letter-spacing: -0.7px;
}
.compare-product_series .title{
  margin-bottom: 40px;
}
.item-product .bg-hover:hover{
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 100%), linear-gradient(180deg, #599BF4 0%, #0D74FF 100%);
}


@media screen and (max-width: 990px){
  .item-product.full-width .block-sale {
    top: 16px;
  }
  .item-product  .block-sale {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
  }
  
  .item-product  .block-sale img {
    width: 60px;
    height: 24.8px;
  }
  
  ul.all-product {
    margin-left: -20px;
 }  
  ul .item-product {
      padding-left: 20px;
      padding-bottom: 20px;
  }
  .text-top svg{
    width: auto;
    height: 18px;
  }
  .block-content .text{
    padding-bottom: 8px;
    font-size: 12px;
    line-height: 20px;
  }
  .price-product .price{
    font-size: 16px;
    line-height: 24px;
  }
  .price-product .compare_at_price{
    font-size: 14px;
    line-height: 22px;
  }
  .text-bottom .button {
    padding: 12px 24px;
}
.compare-product_series .title {
    padding-bottom: 20px;
    font-size: 24px;
    line-height: 32px;
}
.item-product .block-content {
    padding: 20px 0;
    border-radius: 6px;
  }
  .tenways-index .first-section {
    padding-top: 40px;
}
.product-series .compare-product_series .title {
    margin-bottom: 0;
}
.compare-product_series {
    padding-top: 20px;
}
.block-content .text-icon {
    position: absolute;
    left: 20px;
}
.text-icon svg{
  width: 40px;
  height: 40px;
}
}

@media screen and (max-width: 750px){
.all-product .full-width .image-product {
    max-width: 100%;
}
.item-product.full-width .price-product {
    padding-top: 14px;
}
ul .item-product {
    padding-left: 0;
}
ul.all-product {
    margin-left: 0;
}
ul .item-product {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    float: none;
    padding-left: 0;
}
}

</style>
<div class="compare-product_series {% if section.settings.first_section != blank %} first-section {% endif %}">
   <div class="page-width">
     {% if section.settings.heading != blank %}
       <div class="title">{{ section.settings.heading }}</div>
     {% endif %}
    <ul class="all-product">
      {% for block in section.blocks %}
      <li class="item-product {% if block.settings.full_width %} full-width {% endif %}">
         <div class="block-content">
            {% if block.settings.sale_image != blank %}
              <div class="block-sale">
                <img
                  src="{{ block.settings.sale_image | img_url: 'large' }}"
                  alt="{{ block.settings.sale_image.alt | escape }}"
                  loading="lazy"
                  class="lazyload"
                  width="127"
                  height="53"·
                />
              </div>
            {% endif %}
            {% if block.settings.sale_image == blank %}
              {% if block.settings.icon != blank %}
              <span class="text-icon">{{ block.settings.icon }}</span>
              {% endif %}
            {% endif %}
            <div class="text-top">
              {% if block.settings.text != blank %}
                <div class="text">{{ block.settings.text }}</div>
              {% endif %}
              {% if block.settings.html != blank %}
                <div class="html"> {{ block.settings.html }} </div>
              {% endif %}
            </div>
            <div class="image">           
                <div class="image-product">
                  {%- if block.settings.button_label != blank -%}      
                   <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="no-underline"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                  {% endif %}  
                    <div class="image-with-text__media {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                  {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                  >
                  {%- if block.settings.image != blank -%}
                    <img
                      srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                        {%- if block.settings.image.width >= 258 -%}{{ block.settings.image | img_url: '258x' }} 258w,{%- endif -%}
                        {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                        {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                        {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                        {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                        {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                        {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                      src="{{ block.settings.image | img_url: '1500x' }}"
                      data-src="{{ block.settings.image | img_url: '1500x' }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                      alt="{{ block.settings.image.alt | escape }}"
                      loading="lazy"
                      class="lazyload"
                      width="{{ block.settings.image.width }}"
                      height="{{ block.settings.image.height }}"
                    >
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                    </div>
                  {%- if block.settings.button_label != blank -%}       
                  </a>
                  {% endif %}
                </div>           
                <div class="price-product">
                  <span class="price">{{ block.settings.product.price | money }}</span>
                  {% if block.settings.product.compare_at_price != blank %}
                  <span class="compare_at_price">{{ block.settings.product.compare_at_price | money }}</span>               
                  {% endif %}
                </div>
            </div>
            <div class="text-bottom">
              {%- if block.settings.button_label != blank -%}
              <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="bg-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                {{ block.settings.button_label | escape }}
              </a>
              {%- endif -%}
            </div>
         </div>
       </li>
      {% endfor %}
    </ul>
   </div>
</div>


{% schema %}
  {
    "name": "Product series",
    "tag": "section",
    "class": "spaced-section  product-series",
    "settings": [ 
      {
        "type": "checkbox",
        "id": "first_section",
        "default": false,
        "label": "First section"
       },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading"
      }
    ],
    "blocks": [
      {
      "type": "product",
      "name": "product",
      "settings": [
        {
          "type": "image_picker",
          "id": "sale_image",
          "label": "sale"
        },
        {
          "type": "checkbox",
          "id": "full_width",
          "default": false,
          "label": "t:sections.rich-text.settings.full_width.label"
        },
        {
          "type": "product",
          "id": "product",
          "label": "t:sections.featured-product.settings.product.label"
        },
        {
          "type": "html",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "text",
          "label": "text"
        },
        {
          "type": "html",
          "id": "html",
          "label": "Product name"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Product image"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        }, 
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
    ],
    "presets": [
      {
        "name": "Product series"
      }
    ]
  }
{% endschema %}